<!--
  ~ Copyright (c) Jack魏 2023 - 2024, All Rights Reserved.
  -->

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>文件上传演示</title>
  <link rel="icon" th:href="@{/images/yiyi.ico}" type="image/x-icon">
  <meta name="keywords" content="Layui通用后台管理系统,yiyi-web后台管理,后台管理系统,权限系统">
  <meta name="description" content="Layui文件上传演示">
  <meta name="author" content="Jack魏">
  <!-- layui -->
  <link type="text/css" rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
  <script type="text/javascript" th:src="@{/layui/layui.js}" charset="UTF-8"></script>
  <!-- jQuery -->
  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
</head>
<body>
<div class="layui-upload">
  <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-files">选择多文件</button>
  <div class="layui-upload-list">
    <table class="layui-table">
      <colgroup>
        <col style="min-width: 100px;">
        <col width="150">
        <col width="260">
        <col width="150">
      </colgroup>
      <thead>
      <th>文件名</th>
      <th>大小</th>
      <th>上传进度</th>
      <th>操作</th>
      </thead>
      <tbody id="ID-upload-demo-files-list"></tbody>
    </table>
  </div>
  <button type="button" class="layui-btn" id="ID-upload-demo-files-action">开始上传</button>
</div>

<script>
  layui.use(function () {
    var upload = layui.upload;
    var element = layui.element;
    var layer = layui.layer;

    // 制作多文件上传表格
    var uploadListIns = upload.render({
      elem: '#ID-upload-demo-files',
      elemList: $('#ID-upload-demo-files-list'), // 列表元素对象
      url: 'file/upload',
      field: 'files', // 后台接受字段，默认是file
      accept: 'file', // 上传文件类型：images、video、audio
      multiple: true, // 是否多文件
      number: 3, // 最大上传个数
      auto: false, // 是否选完文件后自动上传
      bindAction: '#ID-upload-demo-files-action',
      choose: function (obj) {
        var that = this;
        var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
        // 读取本地文件
        obj.preview(function (index, file, result) {
          var tr = $(['<tr id="upload-' + index + '">',
            '<td>' + file.name + '</td>',
            '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>',
            '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
            '<td>',
            '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
            '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
            '</td>',
            '</tr>'].join(''));

          // 单个重传
          tr.find('.demo-reload').on('click', function () {
            obj.upload(index, file);
          });

          // 删除
          tr.find('.demo-delete').on('click', function () {
            delete files[index]; // 删除对应的文件
            tr.remove(); // 删除表格行
            // 清空 input file 值，以免删除后出现同名文件不可选
            uploadListIns.config.elem.next()[0].value = '';
          });

          that.elemList.append(tr);
          element.render('progress'); // 渲染新加的进度条组件
        });
      },
      done: function (res, index, upload) { // 成功的回调
        var that = this;
        console.log(res)
        if(res.code == 200){ // 上传成功
          var tr = that.elemList.find('tr#upload-' + index)
          var tds = tr.children();
          tds.eq(3).html(''); // 清空操作
          delete this.files[index]; // 删除文件队列已经上传成功的文件
          layer.msg(res.message, {icon: 6});
          return;
        }
        this.error(index, upload);
      },
      allDone: function (obj) { // 多文件上传完毕后的状态回调
        console.log(obj)
      },
      error: function (index, upload) { // 错误回调
        var that = this;
        var tr = that.elemList.find('tr#upload-' + index);
        var tds = tr.children();
        // 显示重传
        tds.eq(3).find('.demo-reload').removeClass('layui-hide');
        layer.msg("上传失败，请重新上传！", {icon: 5});
      },
      progress: function (n, elem, e, index) { // 注意：index 参数为 layui 2.6.6 新增
        element.progress('progress-demo-' + index, n + '%'); // 执行进度条。n 即为返回的进度百分比
      }
    });
  });
</script>

</body>
</html>